<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D变化_多重变换</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            border:2px solid black;
            margin:520px;
            transform-style: preserve-3d;/*开启3D空间*/
            perspective: 500px;

        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: rgba(0,191,225,0.7);
            /*设置原点,如果不设置的话默认就是选中间的位置:x旋转绕平行于x轴y的中线,y旋转绕平行于y轴x的中线*/
            transform-origin: 10px 10px;
            /*旋转*/
            transform: rotateX(45deg) rotateY(45deg);

        /*    如果要进行多重变换的话,建议把旋转rotate放到最后*/

        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner1</div>
</div>

</body>
</html>